<template>
	<view class="xfx-sinput">
		<view class="search-card">
			<view class="bubble-card" v-show="showBubble && isBubble">
				<view v-for="(item, index) in searchList" :key="index" @click="clickBubble(item)">
					<text>{{ item }}</text>
				</view>
			</view>
			<view @click="goChange">
				<text>{{ title }}</text>
				<image src="@/static/xialaxuanze.png" :class="{ bbb: showBubble }" mode="" />
			</view>
			<view class="">
				<icon type="search" size="12"></icon>
				<input v-model="searchValue" @confirm="confirmm" :disabled="isDisabled" :placeholder="placeholderText" type="text" name="" id="" class="placeholderText" />
				<icon v-if="searchValue.length > 0 && isClear" @click="gdg()" type="clear" size="16" color="" />
			</view>
		</view>
		<view v-if="showSearchtext" @click="search" class="search-text">{{ searchText }}</view>
	</view>
</template>

<script>
export default {
	props: {
		placeholderText: {
			type: String,
			default: '请输入'
		},
		isBubble: {
			type: Boolean,
			default: true
		},
		searchText: {
			type: String,
			default: '搜索'
		},
		searchColor: {
			type: String,
			default: '#000000'
		},
		isDisabled: {
			type: Boolean,
			default: false
		},
		searchList: {
			type: Array,
			default: []
		},
		showSearchtext: {
			type: Boolean,
			default: true
		},
		isClear: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			title: '筛选',
			showBubble: false,
			searchValue: ''
		};
	},
	watch: {
		searchValue(neww, old) {
			this.$emit('input', neww);
		}
	},
	onLoad() {},
	methods: {
		gdg(){
			this.searchValue = ''
			console.log(this.searchValue);
		},
		goChange() {
			this.showBubble = true;
			if (this.isBubble) {
				//    this.showBubble = true
			} else {
				var that = this;
				uni.showActionSheet({
					itemList: that.searchList,
					success: function(res) {
						that.title = that.searchList[res.tapIndex];
						that.$emit('confirm', that.searchList[res.tapIndex]);
						that.showBubble = false;
					},
					fail: function(res) {
						console.log(res.errMsg);
						that.showBubble = false;
					}
				});
			}
			var that = this;
			that.showBubble = true;
		},
		clickBubble(item) {
			this.$emit('confirm', item);
			this.title = item;
			this.showBubble = false;
		},
		confirmm(e) {
			console.log(e);
			this.$emit('search');
		},
		search() {
			this.$emit('search');
		}
	}
};
</script>

<style lang="scss">
.xfx-sinput {
	margin-top: 100px;
	width: 100%;
	padding: 0 30rpx;
	box-sizing: border-box;
	display: flex;
	position: relative;
	.search-card {
		flex: 1;
		padding: 6rpx 0rpx;
		background: #ffffff;
		// border: 1px solid #e2e2e2;
		// border-radius: 40rpx;
		display: flex;
		align-items: center;
		.bubble-card {
			position: absolute;
			z-index: 10;
			left: 0rpx;
			top: 110%;
			border: 1px solid #e2e2e2;
			background-color: #ffffff;
			padding: 12px 22px;
			border-radius: 5rpx;
			& > view {
				margin-bottom: 20rpx;
			}
			& > view:nth-last-child(1) {
				margin-bottom: 0;
			}
		}
		.bubble-card::after {
			content: '';
			display: block;
			border: 15rpx solid #ffffff;
			border-left: 15rpx solid transparent;
			border-right: 15rpx solid transparent;
			border-top: 15rpx solid transparent;
			position: absolute;
			top: -28rpx;
			left: 45rpx;
		}
		& > view:nth-child(2) {
			display: flex;
			align-items: center;
			padding: 0 15rpx;
			position: relative;
			text {
			}
			image {
				margin-left: 15rpx;
				transition: all 0.3s;
				width: 28rpx;
				height: 28rpx;
			}
		}
		& > view:nth-child(3) {
			flex: 1;
			padding-left: 25rpx;
			padding-right: 15rpx;
			display: flex;
			align-items: center;
			input {
				padding: 15rpx 10rpx;
			}
		}
	}
	.search-text {
		padding: 0 15rpx;
		margin: 15rpx 0;
		display: flex;
		align-items: center;
		font-size: 25rpx;
		line-height: 1;
		background-color: #ff5500;
		color: #fff;
	}
	.placeholderText {
		font-size: 25rpx;
	}
}
.bbb {
	transform: rotate(-180deg);
}
</style>
